<template>
	<view class="tabWrap">
		<view class="tabItem"
			v-for="(item,index) in tabArr"
			:key="index"
			@tap="goTabPage(item.name)"
		>
			<image class="tabImg" :src="item.url"></image>
			<view class="tabTit">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currRole:String,
			tabArr:Array
		},
		methods:{
			goTabPage(name){
				this.$emit('goTabPage',name);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabWrap{
		display: flex;
		flex-wrap: wrap;
	}
	.tabItem{
		width: 25%;
		text-align: center;
		color: $pss-text-color3;
		margin-bottom: 30rpx;
		@include respTo(phone){
			font-size: $font-size30;
		}
		@include respTo(pad){
			font-size: $padSize16;
		}
		.tabImg{
			width: 112rpx;
			height: 112rpx;
			margin-bottom: 5rpx;
			@include respTo(pad){
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
</style>